<template>
  <div>
    <h1>App..</h1>
    <ul>
      <li v-for="(value, key) in person" :key="key">{{ key }} -- {{ value }}</li>
    </ul>
    <button @click="update">更新</button>

    <ul>
      <li v-for="person in persons" :key="person.id">
        {{ person.name }}
      </li>
    </ul>
    <button @click="add">添加</button>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      person: {
        name: "jack",
        age: 18,
      },
      persons: [
        { id: 1, name: "静哥" },
        { id: 2, name: "陶哥" },
        { id: 3, name: "罗哥" },
        { id: 4, name: "陈哥" },
      ],
    };
  },
  methods: {
    update() {
      // data中原有的数据所有属性都是响应式的，新增加属性不是。（原有的都是响应式，新增加不是）
      // this.person.age++; // 响应式的
      // this.person.gender = "男"; // 不是响应式
      // 需求：希望新增加的数据是响应式的。
      this.$set(this.person, "gender", "男"); // 添加响应式数据的方法
    },
    add() {
      // 对数组下标操作，不是响应式
      // this.persons[4] = { id: 5, name: "熊哥" }; // 不是响应式
      // https://cn.vuejs.org/v2/guide/list.html#%E5%8F%98%E6%9B%B4%E6%96%B9%E6%B3%95
      // 数组的变更方法：vue对数组的部分方法做了封装，将其变成响应式
      // this.persons.push({ id: 5, name: "熊哥" }); // 响应式的

      // this.persons = [{ id: 5, name: "熊哥" }]; // 响应式的

      // this.persons[0].name += "~"; // 响应式的

      // 没有监测数组的下标
      this.persons[0] = { id: 5, name: "熊哥" }; // 不是响应式
    },
  },
};
</script>

<style></style>
